<template>
  <div>
    <div class="container ">
      <!-- 投资合作 -->
      <div class="investment main">
        <div class="stment">
          <div class="form-group row ">
            <div class="col-sm-10 stment_search">
              <input
                type="email"
                class="form-control"
                id="inputEmail3"
                placeholder="请输入关键字"
              />
            </div>
            <div class="col-sm-2">
              <button class="btn btn-primary" type="button" @click="search" >搜索</button>
            </div>
          </div>
          <div class="neighboor In clearfix">
            <span>所属行业：</span>
            <ul>
              <li
                class="text-center"
                v-for="(item,index) in instmentD"
                :class="{'typeactive':instmentcur === index}"
                @click="instmentItme(item,index)"
              >
                {{ item.value }}
              </li>
            </ul>
          </div>
          <div class="neighboor In">
            <span>参与活动类型：</span>
            <ul>
              <li
                class="text-center"
                v-for="(item,index) in typeD"
                :class="{'typeactive':typecur === index}"
                @click="typeItme(item,index)"
              >
                {{ item.value }}
              </li>
            </ul>
          </div>
          <div class="neighboor In">
            <span>融资阶段：</span>
            <ul>
              <li
                class="text-center"
                v-for="(item,index) in financingD"
                :class="{'typeactive':financingcur === index}"
                @click="financingItme(item,index)"
              >
                {{ item.value }}
              </li>
            </ul>
          </div>
          <div class="neighboor In">
            <span>拟融资总额：</span>
            <ul>
              <li
                class="text-center"
                v-for="(item,index) in financing_money"
                :class="{'typeactive':moneycur === index}"
                @click="financingMoney(item,index)"
              >
                {{ item.value }}
              </li>
              <li><input value="" style="width: 70px">-<input value="" style="width: 70px"></li>

            </ul>
            <button class="money-sure">确定</button>
          </div>
          <div class="neighboor In">
            <span>发布时间：</span>
            <ul>
              <li
                class="text-center"
                v-for="(item,index) in publish_time"
                :class="{'typeactive':timecur === index}"
                @click="publishTime(item,index)"
                :key="index"
              >
                {{ item.value }}
              </li>

            </ul>
          </div>
          <div class="neighboor In">
            <span>区域选择:</span>
            <el-select v-model="prov" style="width:167px;margin-right: 25px;">
              <el-option v-for="(option,index) in arr" :value="option.name" :key="index">
                {{ option.name }}
              </el-option>
            </el-select>
            <el-select v-model="city" style="width:167px;margin-right: 25px;">
              <el-option v-for="(option,index) in cityArr" :value="option.name" :key="index">
                {{ option.name }}
              </el-option>
            </el-select>
            <el-select v-model="district" v-if="district" style="width:167px;">
              <el-option v-for="(option,index) in districtArr" :value="option.name" :key="index">
                {{ option.name }}
              </el-option>
            </el-select>
          </div>
          <p class="">共2000条</p>
          <!--  -->
           <div class="module-entry-wrap">
             <div class="fl entry-box">
               <router-link :to="{name:'LookingProjectDetail'}">
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow" title="火炬园高新企业项目">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </router-link>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                   <h2 class="text-overflow">火炬园高新企业项目</h2>
                   <p>活动金额：5-8万</p>
                   <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                   <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
             <div class="fl entry-box">
               <a>
                 <img src="https://bpic.588ku.com/element_banner/20/19/05/115e35ad8636ff6fb08c5d0c89724541.jpg" title="国潮元素" alt="国潮元素">
                 <div class="entb-hover-center">
                   <div class="show_der">
                     <h2 class="text-overflow">火炬园高新企业项目</h2>
                     <p>活动金额：5-8万</p>
                     <p class="text-overflow">活动地址：湖里区湖里大道33号</p>
                     <span>国潮元素</span></div>
                 </div>
               </a>
             </div>
           </div>
        </div>
        <!--分页-->
        <pagination :msg="page" @refreshList="onRefresList"></pagination>
      </div>

    </div>
  </div>
</template>

<script>
  import pagination from '../../views/localPage/pagination'
  import area from '../../../static/js/area.js'
  export default {
    name: "LookingProject",
    components:{pagination},
    data(){
      return{
        page:{
          pagesize:4,
          total:900,
        },
        arr: area.arrAll,
        prov: '省份',
        city: '城市',
        district: '区域',
        cityArr: [],
        districtArr: [],
        instmentcur: 0,
        typecur: 0,
        timecur: 0,
        financingcur: 0,
        moneycur:0,
        instmentD: [
          { value: "全部" },
          { value: "纳米技术" },
          { value: "软件服务" }
        ],
        typeD: [{ value: "全部" }, { value: "创业大赛" }],
        financingD: [{ value: "全部" }, { value: "天使轮" },{ value: "A轮" },{ value: "B轮" }],
        financing_money: [{ value: "全部" }, { value: "50万以内" },{ value: "500-1000万" },{ value: "1000-2000万" },
          { value: "2000-5000万" },{ value: "5000万以内" }],
        publish_time: [{ value: "全部" }, { value: "3个月以内" },{ value: "3月-1年" },{ value: "1-3年" },
          { value: "3-5年" },{ value: "5年以上" }],


      }
    },
    methods: {
      // 搜索邻域：        不限
      search: function() {},

      // 投资邻域
      instmentItme(item, index) {
        this.instmentcur = index;
      },
      // 类型
      typeItme(item, index) {
        this.typecur = index;
      },
      financingItme(item, index) {
        this.financingcur = index;
      },
      financingMoney(item, index) {
        this.moneycur = index;
      },
      publishTime(item, index) {
        this.timecur = index;
      },
      onRefresList(val){
        console.log(val)
      },
      updateCity: function() {
        for (var i in this.arr) {
          var obj = this.arr[i];
          if (obj.name) {
            if (obj.name == this.prov) {
              this.cityArr = obj.sub;
              break;
            }
          }
        }
        this.city = this.cityArr[1].name;
      },
      updateDistrict: function() {
        for (var i in this.cityArr) {
          var obj = this.cityArr[i];
          if (obj.name == this.city) {
            this.districtArr = obj.sub;
            break;
          }
        }
        if (this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
          this.district = this.districtArr[1].name;
        } else {
          this.district = '';
        }
      }

    },
    beforeMount() {
      this.updateCity();
      this.updateDistrict();

    },
    watch: {
      prov: function() {
        this.updateCity();
        this.updateDistrict();
      },
      city: function() {
        this.updateDistrict();
      }
    }
  }
</script>
<style scoped>
.investment {
  padding: 50px 30px ;

}
.neighboor {
  margin-bottom: 10px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 50px;
}
.neighboor span {
  margin-right: 40px;
  color: #666;
  font-size: 16px;
}
.neighboor ul li {
  float: left;
  height: 32px;
  line-height: 32px;
  color: #666;
  text-align: left !important;
  width: 100px;
  margin-right: 10px;
}

.neighboor .typeactive{color: #1575f9;}
.neighboor span{
  width: 120px;

}

.neighboor ul li:first-child{

  width: 65px;
}
.neighboor ul li:last-child{

  width: 150px;
}
  .money-sure{
    width: 74px;
    height: 37px;
    background: #0060ff;
    font-size:16px;
    border:1px solid rgba(224,224,224,1);
    border-radius:4px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    color: #ffffff;
  }

.module-entry-wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}
.module-entry-wrap .entry-box {
  width: 240px;
  height: 180px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
}
.module-entry-wrap .entry-box > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.module-entry-wrap .entry-box > a img {
  width: 100%;
  height: 180px;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}
.module-entry-wrap .entry-box > a .entb-hover-center {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(14, 22, 32, 0.4);
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  transition: all .4s;
}
.module-entry-wrap .entry-box > a .entb-hover-center .show_der {

  position: relative;
  top: 58%;
  padding-left: 18px;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.module-entry-wrap .entry-box > a:hover .entb-hover-center {
  opacity: 1;
}
  .show_der h2{
    font-size:18px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
.show_der p{
  font-size:14px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(255,255,255,1);
}
.show_der span{
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(255,255,255,1);
}
</style>


